<template>
    <div>
        <el-form status-icon ref="form" :model="form" :rules="rules" label-width="80px" class="register-box">
        <h3 class="login-title">请绑定手机号码</h3>
            <el-form-item label="账号" prop="username">
                <el-input type="text" v-model="form.username" style="width:160px" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input type="text" placeholder="请输入手机号码" v-model="form.phone" style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="checkNum">
                <el-input type="text" placeholder="验证码" v-model="form.checkNum" style="width:100px"></el-input>
            </el-form-item>
            <span @click="sendSMSBtn" v-show="sendSMSbtnshow" class="sendSMSBtn">发送验证码</span>
            <span v-show="sendSMSbtnshow2" class="sendSMSBtn2">{{changeShowNum}}秒再次发送</span>
            <el-button type="primary" @click="submitForm('form')">立即绑定</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
            <el-button  class="gologin" @click="skip()">跳过</el-button>
        </el-form>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name:'XiaoBindPhone',
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                return callback(new Error('手机号码不能为空'));
                }
                setTimeout(() => {
                if (isNaN(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value.length != 11) {
                    callback(new Error('手机号码必须为11位数字'));
                    } else {
                    callback();
                    this.sendSMSbtnshow=1;
                    }
                }
                }, 200);
            };
            var checkcheckNum = (rule, value, callback) => {
                if (!value) {
                return callback(new Error('验证码不能为空'));
                }
                setTimeout(() => {
                if (isNaN(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value.length != 6) {
                    callback(new Error('输入6位数字'));
                    } else {
                    callback()
                    }
                }
                }, 200);
            };
            return {
                sendSMSbtnshow:0,
                sendSMSbtnshow2:0,
                changeShowNum:0,
                templateID:1341374,//绑定手机号码模板id
                form:{
                    username:'',
                    phone:'',
                    checkNum:'',
                },
                rules:{
                    phone: [
                        { required: true,validator: checkPhone, trigger: 'blur'},
                    ],
                    username:[{
                        required: true,
                        message:'请输入用户名',
                        trigger:'blur'
                    }],
                    checkNum:[{
                        required: true,validator: checkcheckNum,trigger:'blur'
                    }],
                }
            }
        },
        watch:{
            sendSMSbtnshow2(value){
                if(value == 1){
                    this.changeShowNum=60
                    this.timer = setInterval(() => {
                        this.changeShowNum--
                    }, 1000);
                    setTimeout(() => {
                        this.sendSMSbtnshow=1
                        this.sendSMSbtnshow2=0
                        clearInterval(this.timer)
                    }, 60000);
                }
            }
        },
        methods: {
            sendSMSBtn(){
                this.$addr.get(`sms/${this.form.phone}/${this.templateID}/send`).then(
                    response=>{
                        console.log('请求成功了',response)
                        this.$message({
                            message: '已经发送验证码',
                            type: 'success'
                        });
                        this.sendSMSbtnshow=0
                        this.sendSMSbtnshow2=1
                    },
                    error=>{
                        this.$message({
                            message: '呕吼请求失败了',
                            type: 'warning'
                        });
                        console.log('请求失败了',error.message)
                    }
                )
            },
            submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.form.username,'@@@',this.form.password);
                    this.$addr.get(`sms/${this.form.checkNum}/check`).then(
                        response=>{
                            console.log('请求成功了',response)
                            if(response.data.state == 7000){
                                this.$message({
                                    message: '验证码错误',
                                    type: 'error'
                                });
                            }else if(response.data.state == 200){
                                this.$message({
                                    message: '绑定手机号码成功',
                                    type: 'success'
                                });
                                // if(this.$route.params.oldrouter == 'page'){
                                //     this.$router.replace({name:'xperMain',params:{username:this.form.username}})
                                // }else if(this.$route.params.oldrouter == 'wap'){
                                //     this.$router.replace({name:'PxPersionMain',params:{username:this.form.username}})
                                // }
                                this.$router.replace({name:'PxTake_outTest',params:{logindata:1}})
                            }
                        },
                        error=>{
                            console.log('请求失败了',error.message)
                        }
                    )
                }
            })},
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            skip(){
                // PxTake_outTest
                // if(this.$route.params.oldrouter == 'page'){
                //     this.$router.replace({name:'xperMain',params:{username:this.form.username}})
                // }else if(this.$route.params.oldrouter == 'wap'){
                    // this.$router.replace({name:'PxPersionMain',params:{username:this.form.username}})
                // }
                this.$router.replace({name:'PxTake_outTest',params:{username:this.form.username}})
            }
        },
        mounted(){
            if(sessionStorage.getItem('username') !=null){  //如果sessionStorage里的数据存在时
                if(this.$route.params.username != null) {   //如果路由有传来数据(到达订单详情页面),此时是没有关闭已经存在的的订单详情页面而进行的路由跳转
                    // console.log(this.$route.params.username,'%%%%%%');
                    if(this.$route.params.username != sessionStorage.getItem('username')){
                    this.form.username = this.$route.params.username
                    sessionStorage.setItem('username',JSON.stringify(this.form.username))
                    // console.log('111session数据存在route数据也存在');
                    }else{
                        this.form.username=JSON.parse(sessionStorage.getItem('username'))
                        // console.log('222session数据存在route数据也存在且相等');
                    }
                }else{
                    this.form.username=JSON.parse(sessionStorage.getItem('username'))
                    // console.log('333session数据存在route数据不存在为null');
                }
            }else{	    //如果sessionStorage里没有数据(即路由有跳转)    此时解释为初次进入订单详情界面
                this.form.username = this.$route.params.username
                sessionStorage.setItem('username',JSON.stringify(this.form.username))
                // console.log('444session不存在route数据存在');
            }
        },
    }
</script>

<style lang="scss" scoped>
    .register-box{
        width: 350px;
        margin: 150px auto;
        border: 1px solid #DCDFE6;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 30px #DCDFE6;
    }
    .login-title{
        text-align: center;
    }
    .gologin{
        background-color: rgb(105, 211, 214);
    }
    .sendSMSBtn{
        font-size: 12px;
        cursor: pointer;
        margin-left: 230px;
        margin-top: -59px;
        position: absolute;
        padding: 9px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 3px;
        background-color: rgb(255, 233, 160);
    }
    .sendSMSBtn2{
        font-size: 12px;
        cursor: not-allowed;
        margin-left: 230px;
        margin-top: -59px;
        position: absolute;
        padding: 9px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 3px;
        background-color: rgb(223, 223, 223);
    }
</style>
